<template>
  <div class="page-container page-container-detail-page" :style="{height:HEIGHT+'px'}">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员等级管理</el-breadcrumb-item>
        <el-breadcrumb-item>查看商家店铺等级</el-breadcrumb-item>
        <el-breadcrumb-item>查看权益</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar page-container-detail">
      <el-form ref="rulePowerForm"  :model="rulePowerForm">
        <el-row>
         <el-form-item label="等级名称:" label-width="120px" class="labelAlignment mb30 "> <span class="font18">{{rulePowerForm.vipName}}</span></el-form-item>
         <el-form-item label="所属平台:" label-width="120px" class="labelAlignment mb30 "> <span class="font18">{{rulePowerForm.deptName}}</span></el-form-item>
         <el-form-item label="所属商家/店铺:" class="labelAlignment mb30" label-width="120px" v-if="this.data.deptType != 1"> <span class="font18">{{this.data.merchantOrStoreName}}</span></el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="VIP权益:"  label-width="120px" class="t_r">
            <!-- <template>
              <el-transfer 
              v-model="rulePowerForm.ruleIds" 
              :data="data" 
              :titles="['可选权限', '已选权限']"
              >
              </el-transfer>
            </template> -->
            <template>
              <el-table :data="tableData" style="width:460px" class="spcTable" >
                <el-table-column prop="legalRuleName" :label="vipLabel" width="459" size="mini"></el-table-column>
              </el-table>
            </template>
          </el-form-item>
        </el-row>
            <div style="text-align:center">
              <!-- <el-button :size="size" @click="back">{{ $t("action.cancel") }}</el-button> -->
            </div>
      </el-form>
    </div>


  </div>
</template>

<script>
  import CyTable from "@/views/Core/JicTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import {validatePhone,validateContacts,isEmail,isNumber} from '@/utils/validate'
  import XLSX from "xlsx";
  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog,
    },
    created() {
 
    //单个参数传递的时候
      this.id = this.$route.query.id;//获取上个页面传递的id,在下面获取数据的时候先提交id
      this.type = this.$route.query.type;
 
    //这边接收上个组件传递过来的arry数组，赋值给data中定义的articleTask
      //this.data = this.$route.query.arry;
    },
    data() {
      return {
        HEIGHT:window.innerHeight,
        type:null,
        vipLabel:"",
        tableData:[],
        data:[],
        startTime:null,
        endTime:null,
        id:this.$route.query.id,
        businessId:"",
        deptMsg:localStorage.getItem('user'),//当前登录组织信息
        userId:localStorage.getItem("userId"),//当前登录用户id
        deptType:localStorage.getItem("deptType"),//当前登录用户所属组织类型
        deptName:null,
        deptOption:[],
        content: null,
        size: "small",
        rulePowerForm: {
          id:'',
          deptId:'',
          deptName:"",
          levelName:'',
          ruleIds:[]
       },
        pageResult: {},
        value:0,
        printPage:false,
        editLoading: false,
        reviewFormRules: {

        },
        checked: [],
        statusList: []
      };
    },
    methods: {
      queryData(){
        let this_=this;
        let query={};
        query.id=this.id;
        query.start= 1,
        query.limit= 10   
        if(this.type != 1){
            query.isMom=1
            this.utils.request.queryMegradeRuleSimple(query, function (res) {
            if(res.code == '0000'){
              this_.rulePowerForm.vipName=res.data.rows[0].levelName;
              this_.rulePowerForm.deptName=res.data.rows[0].deptName;
              this_.rulePowerForm.deptId=res.data.rows[0].deptId;
              this_.rulePowerForm.id=res.data.rows[0].id;
              this_.data.deptType=res.data.rows[0].deptType;
              this_.query(res.data.rows[0].deptId,res.data.rows[0].id);

            }
          });
        }else{
            this_.utils.request.queryPowerRule(query, function(res) {
            if (res.code == "0000") {
                this_.rulePowerForm.vipName=res.data.rows[0].levelName;
                this_.rulePowerForm.deptName=res.data.rows[0].deptName;
                this_.rulePowerForm.deptId=res.data.rows[0].deptId;
                this_.rulePowerForm.id=res.data.rows[0].id;
                this_.data.deptType=res.data.rows[0].deptType;
                this_.data.merchantOrStoreName=res.data.rows[0].merchantOrStoreName;
                this_.query(res.data.rows[0].deptId,res.data.rows[0].id);
            }
          });
        }
        
      },
      //已配置权益
      query(deptId,id){
        let this_=this;
        let query={};
        query.deptId=deptId
        query.gradeId=id
        query.deleteFlag=0;
        this_.utils.request.queryMegradeRule(query,function(res){
           if (res.code == "0000") {
             this_.tableData=res.data;
             this_.vipLabel="已选权益"+'('+res.data.length+')';
            }
        })
      },
      //返回上一层
      back(){
        this.$router.go(-1);
      },  
    },
    mounted() {
       this.queryData()
    }
  };
</script>

<style lang="scss" scoped>
  /deep/ .el-transfer-panel{
   width: 250px !important;
}
.page-container-detail {
  padding: 40px 40px 60px;
}
/deep/ .el-transfer-panel {
  width: 460px !important;
  height: 318px !important;
}
.mb60 {
  margin-bottom: 60px;
}
.btnAlignment {
  text-align: center;
  /deep/ .el-button {
    width: 102px;
    height: 32px;
    margin-right: 60px;
  }
}
/deep/ .el-form-item__label {
  margin-right: 20px;
  font-size: 18px;
}
/deep/ .el-transfer__buttons {
  button {
    display: block;
    margin-right: 0;
    margin-left: 0;
  }
  button:nth-child(1) {
    margin-bottom: 80px;
  }
}
/deep/ .el-table__body tr{
  height: 50px !important;
}
.spcTable{
  /deep/ .el-table__header th {
  background-color: #65afff !important;
   .cell {
    color: #fff !important;
    font-size: 18px;
  }
}
/deep/ .el-table__row{
  /deep/ td  {
    text-align: left;
    padding: 0;
    padding-left: 30px;
    border-bottom: none !important;
  }
}
}


.alignment{
  text-align: left;
  /deep/ .el-form-item__label{
    width: 131px !important;
  }
}
</style>
